import React, { useEffect, useState } from 'react'
import { connect } from 'dva'
import PlanBaseInfo from './component/PlanBaseInfo'
import FoldTable from 'components/common/foldTable'
import checkColums from 'columns/deviceCheck'
import ObjectInfo from './component/ObjectInfo'
import CheckPanel from 'components/common/checkPanel'
import DeviceMessage from 'components/common/deviceMessage'
import MaintenanceMessage from 'components/common/maintenanceMessage'
import TitleLine from 'components/common/titleLine'
import { message } from 'antd'
import router from 'umi/router'

import './index.styl'
import './common/styles.styl'

function Detail ({ 
    location,
    dispatch,
    location: { query },
    deviceCheck: { detailData, proccessMsg },
    headerTaps: { panes },
 }) {
      // 执行结果
    checkColums.details[checkColums.details.length - 3].render = (t, scord) => (
        <>
        {
          scord.result
          ?
          <span>{scord.resultStr}</span>
          :
          <>
          <span>{scord.resultStr}：</span>
          <span>{scord.failReason}</span>
          </>
        }
        </>
    )
    const [projectList, setList] = useState([])
    // 当点检项目为草稿状态下，不显示已经删除的任务，因此对数据进行过滤
    useEffect(()=>{
        if (detailData && detailData.checkTaskVoList) {
            if (detailData.status === 5) {
                const listData = detailData.checkTaskVoList.filter(item => item.deleted === 'N')
                setList(listData)
                return
            }
            setList(detailData.checkTaskVoList)
        }
    },[detailData])
    // 获取每个任务下得子节点
    // useEffect(()=>{
    //     if (projectList.length) {
        
    //     }
    // },[projectList])
    useEffect(() => {
        dispatch({type: 'deviceCheck/clean', })
        dispatch({
            type: 'deviceCheck/getCheck',
            payload: {
                id: query.id,
            }
        }).then(res => {
            if (res.code !== '000000') {
                // 关闭当前tabs
                message.error(res.mesg)
                const { pathname } = location
                const panesList = panes.filter(pane => pane.key !== pathname);
                dispatch({
                    type: 'headerTaps/updateHeaderTaps',
                    payload: { panes: panesList },
                });
                router.push('/deviceCheck')
            }
        })
    },[dispatch, location, panes, query.id])

    useEffect(() => {
        if (detailData.procInsId) {
            dispatch({
                type: 'deviceCheck/getProccessMsgs',
                payload: {
                    id: detailData.procInsId,
                }
            })
        }
    },[detailData.procInsId, dispatch])

    // 更新节点流程
    const getListAgain = () => {
        dispatch({
            type: 'deviceCheck/getProccessMsgs',
            payload: {
                id: detailData.procInsId,
            }
        })
    }

     // 项目任务列表的分页
    async function handleChangePage(current, checkTaskId) {
        dispatch({
            type: 'deviceCheck/getByCheckTask',
            payload: {
                checkTaskId, // 点检计划任务id
                current,     // 当前页
                size: '5'         // 每页总条数
            }
        })
        .then(data => {
            if (data && data.code === '000000') {
                let arr = projectList.map(item => {
                    if (item.id === checkTaskId) {
                        item.page = data.data
                        item.current = current
                    }
                    return item
                })
                setList([...arr])
            }
        })
    }
    console.log('projectList', projectList)
    return (
        <div className='deviceCheck_detail'>
            <div className='leftbox'>
                <PlanBaseInfo  data={detailData}/>
                <div className='eqioment-member'>
                    <div className="eqioment-info">
                        <DeviceMessage title="设备信息" data={detailData} deviceInfo={detailData.deviceVo} isDetail={true}/>
                    </div>
                    <div className="human-info">
                        <MaintenanceMessage title="点检员信息" data={detailData} maintenanceInfo={detailData.checkUserInfoVo}/>
                    </div>
                </div>
                <TitleLine title='点检项目信息'/>
                {
                    projectList.length > 0 && projectList.map((item) => {
                        return ( 
                            <>
                                <ObjectInfo data={item}/>
                                <FoldTable
                                    style={{padding: '0 0.12rem'}}
                                    tableInfo={item.page}
                                    tableColumns={checkColums.details}
                                    handleChangePage={(page) => handleChangePage(page, item.id)}
                                />
                            </>
                        )
                    })
                }
                
                
            </div>
            <div className='rightbox'>
                <CheckPanel 
                    list={proccessMsg && proccessMsg.slice(1,proccessMsg.length)}
                    id={detailData.id} 
                    processType='spotCheck' 
                    procInsId={detailData.procInsId}
                    getListAgain={getListAgain}
                />
            </div>
        </div>
    )
}

export default connect(({ deviceCheck, headerTaps }) => ({
    deviceCheck, headerTaps
}))(Detail)